<template>
    <div>
        <h3 class="ivu-mt-8">月到诊占比</h3>
        <Form class="ivu-mt-16 ivu-mb-16">
            <DatePicker :editable="false"
                :clearable="false"
                v-model="year"
                v-width="100"
                type="year"
                @on-change="changeParams"
            />
            <Select
                v-width="130"
                class="ivu-ml-8"
                clearable
                filterable
                placeholder="请选择部门"
                v-model="department_id"
                @on-change="changeParams"
            >
                <Option
                    v-for="(item, index) in departmentList"
                    :key="index"
                    :value="item.value"
                    >{{ item.label }}</Option
                >
            </Select>
        </Form>
        <Table
            border
            show-summary
            :columns="columns"
            :data="dataWithPage"
            :loading="loading"
        ></Table>
    </div>
</template>
<script>
import { getMonthRate } from "@/api/TApi/index.js";
import dayjs from "dayjs";

export default {
    name: "consultant",
    props: {
        departmentList: {
            type: Array,
            default: () => [],
        },
    },
    methods: {
        _getMonthRate() {
            let params = {
                year: dayjs(this.year).format("YYYY"),
                department_id: this.department_id,
            };
            this.loading = true;
            getMonthRate(params).then((res) => {
                this.loading = false;
                this.dataWithPage = Object.freeze(
                    res.map((ee) => {
                        return {
                            ...ee,
                            oneMonth:
                                parseInt(ee.this_arrive_percent * 1000) / 10 +
                                "%",
                            twoMonth:
                                parseInt(ee.last_arrive_1_percent * 1000) / 10 +
                                "%",
                            threeMonth:
                                parseInt(ee.last_arrive_2_percent * 1000) / 10 +
                                "%",
                            foreMonth:
                                parseInt(ee.last_arrive_3_percent * 1000) / 10 +
                                "%",
                        };
                    })
                );
            });
        },
        changeParams() {
            this._getMonthRate();
        },
    },
    mounted() {
        this._getMonthRate();
    },
    data() {
        return {
            department_id: "",
            year: dayjs(new Date()).format("YYYY"),
            dataWithPage: [],
            loading: false,
            columns: Object.freeze([
                {
                    title: "月份",
                    key: "month",
                    width: 118,
                    fixed: "left",
                },
                {
                    title: "总到诊",
                    key: "all_arrive",
                    width: 100,
                    fixed: "left",
                },
                {
                    title: "本月",
                    align: "center",
                    children: [
                        {
                            title: "到诊",
                            key: "this_arrive",
                            minWidth: 100,
                            align: "center",
                        },
                        {
                            title: "占比",
                            key: "oneMonth",
                            minWidth: 100,
                            align: "center",
                        },
                    ],
                },
                {
                    title: "前一个月",
                    align: "center",
                    children: [
                        {
                            title: "到诊",
                            key: "last_arrive_1",
                            minWidth: 100,
                            align: "center",
                        },
                        {
                            title: "占比",
                            key: "twoMonth",
                            minWidth: 100,
                            align: "center",
                        },
                    ],
                },
                {
                    title: "前2~3个月",
                    align: "center",
                    children: [
                        {
                            title: "到诊",
                            key: "last_arrive_2",
                            minWidth: 100,
                            align: "center",
                        },
                        {
                            title: "占比",
                            key: "threeMonth",
                            minWidth: 100,
                            align: "center",
                        },
                    ],
                },
                {
                    title: "前3个月以上",
                    align: "center",
                    children: [
                        {
                            title: "到诊",
                            key: "last_arrive_3",
                            minWidth: 100,
                            align: "center",
                        },
                        {
                            title: "占比",
                            key: "foreMonth",
                            minWidth: 100,
                            align: "center",
                        },
                    ],
                },
            ]),
        };
    },
};
</script>
